import React, { Component } from 'react';
import {
  StyleSheet, View, Text,
  Image, TouchableOpacity, ScrollView, Dimensions
} from "react-native";
import { Common } from '../../component/common/Common';
import { style } from '../../theme/style';
import { GLOBAL } from '../../config/global';

const scale = GLOBAL.SCALE;
export class SlideSelect extends Component {

  constructor(props) {
    super(props)
    let { alertShow, options, titile,companyIndex} = this.props;
    this.state = {
      choice: '',
      corpId: '',
      defaultCorpId: '',
      alertShow: alertShow || false,
      options: options || [],
      selectIndex: companyIndex||0,
      titile: titile || '',
    };
  }

  componentWillReceiveProps (props) {
    let { alertShow, options } = props || {};
    this.setState({
      alertShow: alertShow,
      options: options || []
    })
  }

  //取消  
  cancel () {
    let { unselect } = this.props || {};
    unselect && unselect();
    this.setState({ alertShow: false })
  }

  //选择  
  ok (choiceIndex) {
    let { options } = this.state;
    console.log('options', options)
    this.setState({
      corpId: options[choiceIndex].corpId,
      corpName: options[choiceIndex].corpName,
      defaultCorpId: options[choiceIndex].defaultCorpId,
      organId: options[choiceIndex].organId,
      alertShow: false
    }, () => {
      this.props.select(
        {
          corpName: this.state.corpName ? this.state.corpName : this.state.options[0].corpName,
          corpId: this.state.corpId ? this.state.corpId : this.state.options[0].corpId,
          defaultCorpId: this.state.defaultCorpId,
          organId: this.state.organId ? this.state.organId : this.state.options[0].organId,
          selectIndex:this.state.selectIndex?this.state.selectIndex:0
        }
      )
    })
  }
  _selectCallBack = (index) => {
    var This = this;
    this.setState({
      selectIndex: index
    }, () => {
      setTimeout(() => {
        this.ok(index);
      }, 100)
    })
  }
  render () {
    let { corpId, choice, options, selectIndex, titile } = this.state;
    let rightImg = require('../../imgs/global/success.png');
    let emptyImg = require('../../imgs/global/option.png');
    return (
      <Common type="modal"
        demoData={(
          <View style={[styles.bombBody, options.length > 6 ? { height: '50%' } : null]}>
            <Text style={styles.bombTitle}>{titile || '选择帐套'}</Text>
            <ScrollView>
              {options && options.length > 0 ? (
                options.map((item, index) => {
                  return (
                    <TouchableOpacity key={index} style={styles.bombList} onPress={() => { this._selectCallBack(index); }}>
                      <Text style={styles.bombTextFont}>{item.corpName}</Text>
                      <Image style={styles.bombImg} source={selectIndex == index ? rightImg : emptyImg} />
                    </TouchableOpacity>
                  )
                })
              ) : (<Text>暂无数据</Text>)
              }
            </ScrollView>
          </View>
        )}
        isVisible={this.state.alertShow}
        closeCallballFn={this.cancel.bind(this)}
      />
    );
  }
}
const styles = StyleSheet.create({
  bombBody: {
    width: 300 * scale,
    paddingLeft: 25 * scale,
    paddingRight: 17 * scale,
    paddingBottom: 15 * scale,
    backgroundColor: style.color.white,
    borderRadius: 13 * scale,
  },
  bombTitle: {
    fontSize: 12 * scale,
    color: style.color.darkGray,
    paddingTop: 15 * scale,
    paddingBottom: 15 * scale
  },
  bombList: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingTop: 10 * scale,
    paddingBottom: 10 * scale,
    paddingRight: 8 * scale,
  },
  bombImg: {
    width: 14 * scale,
    height: 14 * scale,
  },
  bombTextFont: {
    fontSize: 13 * scale,
    color: style.color.dark,
    width: '90%'
  },
  selectStyle: {
    width: 13 * scale,
    height: 7 * scale,
    marginLeft: 5 * scale
  },
  close: {
    position: 'absolute',
    right: 15 * scale,
    top: 15 * scale,
  }
})